
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Augment Code - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Augment Code - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">Augment Code 的核心设计理念是什么，以及它主要面向哪类开发场景？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">其核心设计理念是“最了解你和你代码库的编码助手”（The coding agent that knows you & your codebase best）。它专为处理大型、复杂的代码库而设计，强调对整个代码库的全面理解，特别适合团队协作和复杂项目开发。</div>
          </div>
          <div class="card-source">来源: 文档中「什么是 Augment Code？」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">Augment Code 支持的上下文窗口大小是多少？这一特性带来了什么关键优势？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Augment Code 支持高达 20 万 token 的上下文窗口。这一特性使其能够处理复杂的项目结构，快速理解大型代码库的架构和依赖关系，尤其在处理“屎山代码”或多仓库项目时表现尤为突出。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能」部分的「超长上下文窗口（20 万 token）」</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">除了传统的文本输入，Augment Code 还支持哪些多模态输入方式？这在什么场景下特别有用？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Augment Code 支持截图、Figma 设计文件等多模态输入。这对于前端开发和 UI 调试尤其有用，开发者可以通过上传界面截图或设计稿，让 Augment Code 直接生成对应的前端代码或修复 UI 相关 bug。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能」部分的「多模态输入支持」</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Augment Code 的“持久化记忆系统”是如何提升开发体验的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该系统能够自动更新并在对话间持久保存开发者的编码风格和偏好。随着使用时间的增长，它会越来越了解开发者的习惯，使得生成的代码匹配度更高，从而减少了手动调整的需要。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能」部分的「持久化记忆系统」</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">优势</div>
          <div class="card-question">根据 SWE-Bench Verified 基准测试，Augment Code 的性能表现如何？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">优势</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在 SWE-Bench Verified 基准测试中，Augment Code 结合 Claude Sonnet 3.7 和 OpenAI O1 模型，以 65.4% 的得分位居第一，证明了其在代码生成和理解方面的卓越能力。</div>
          </div>
          <div class="card-source">来源: 文档中「Augment Code 的优势」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">在模型选择的用户体验设计上，Augment Code 的理念与 Cursor 等工具有何不同？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Augment Code 批评了其他工具（如 Cursor）提供“模型选择器”的设计。它主张通过自动选择最佳模型来提升效率，从而减少用户的决策负担。</div>
          </div>
          <div class="card-source">来源: 文档中「Augment Code 的优势」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">Augment Code 是如何保障企业级用户数据安全与合规性的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Augment Code 的付费版数据不会被用于模型训练，并且它符合 SOC 2 Type II 认证，以此来确保企业级数据的安全，这对于需要保护知识产权的大型团队尤为重要。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能」部分的「数据安全与合规性」</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">应用</div>
          <div class="card-question">Augment Code 的 Agent 模式在哪些应用场景下特别有价值？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">应用</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">其 Agent 模式能在几分钟内生成前后端代码，因此特别适合用于快速验证想法或进行原型开发，尤其适用于初创公司或需要快速迭代的团队。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能」部分的「快速原型开发与团队协作」及「应用场景」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">优势</div>
          <div class="card-question">与竞争对手（如 Cursor 和 GitHub Copilot）相比，文档中提到的 Augment Code 的两个主要优势是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">优势</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">两个主要优势是：1. 上下文能力更强，其 20 万 token 的上下文窗口远超对手，适合处理大型项目。2. 支持多模态输入，如截图和设计文件，增强了前端开发的灵活性。</div>
          </div>
          <div class="card-source">来源: 文档中「与竞争对手的比较」部分</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
